<!-- @format -->

<template>
  <view>
    <view class="myContent">
      <view class="title">我的</view>
      <view class="myTopImg">
        <image :src="imgUrl + 'mine/myTopBgc.png'" mode="widthFix" />
      </view>

      <view class="myMiddle">
        <view class="middleCon">
          <image :src="imgUrl + 'mine/myContentBgc.png'" mode="scaleToFill" />
        </view>
        <view>
			<view class="profile">
          <button  :open-type="phonenumber==0?'':'chooseAvatar'" @chooseavatar="onChooseAvatar">
            <image
              class="avaterImg"
              :src="avatar === '' ? imgUrl + '/mine/profile.png' : avatar"
              mode="scaleToFill" />
          </button>
		  </view>
        </view>
<view style="position:absolute;z-index:2;top:120rpx;width:100%;">
		  
          <navigator  hover-class="none" style="display: flex;justify-content: center;">
            <view class="userName" v-if="phonenumber === ''">未登录用户</view>
            <view class="phonenumber" style="text-align: center;" v-else >
              {{ nickName==null?'':nickName }}
              <image
                class="badge1 "
                v-if="optionId === 1 && phonenumber != 0"
                src="../../static/mine/newcomer.png"
                mode="scaleToFill" />
              <image
                class="badge1"
                v-if="optionId === 2 && phonenumber != 0"
                src="../../static/mine/sharing.png"
                mode="scaleToFill" />
              <image
                class="badge1"
                v-if="optionId === 3 && phonenumber != 0"
                src="../../static/mine/experts.png"
                mode="scaleToFill" />
            </view>
          </navigator>
		  </view>
        <view class="myMiddleActivity">
          <view class="activity">
            <view @tap="ectBtn">
              <view class="collection">
                <image
                  :src="imgUrl + 'mine/collection.png'"
                  mode="scaleToFill" />
                <view class="num">{{ badgesNum }}</view>
                <view class="title1">收藏馆</view>
              </view>
            </view>
            <view class="itinerary" @tap="goTrip">
              <image :src="imgUrl + 'mine/itinerary.png'" mode="scaleToFill" />
              <view class="num">{{ oneOrderNum }}</view>
              <view class="title1">我的行程单</view>
            </view>
            <view class="circle" @tap="circleBtn">
              
                <image :src="imgUrl + 'mine/circle.png'" mode="scaleToFill" />
                <view class="num">{{ circleNum }}</view>
                <view class="title1">我的雪圈</view>
         
            </view>
          </view>

          <view class="mySetting">
            <view class="setTitle">更多服务</view>
            <view class="services">
              <view class="settingLogin" @tap="btnSet">
                <image
                  v-if="phonenumber == 0"
                  :src="imgUrl + 'mine/login.png'"
                  mode="scaleToFill" />
                <image
                  v-else
                  :src="imgUrl + 'mine/setting.png'"
                  mode="scaleToFill" />
                <view class="text">
                  {{ phonenumber == 0 ? '登录' : '设置' }}
                </view>
                <uni-icons
                  type="forward"
                  size="15"
                  color="#000"
                  class="icon"></uni-icons>
              </view>
              <view class="setting" @tap="goPolicy">
                <image
                  v-if="phonenumber == 0"
                  :src="imgUrl + 'mine/setting.png'"
                  mode="scaleToFill" />
                <image
                  v-else
                  :src="imgUrl + 'mine/policy.png'"
                  mode="scaleToFill" />
                <view class="text">
                  {{ phonenumber == 0 ? '设置' : '隐私政策' }}
                </view>
                <uni-icons
                  type="forward"
                  size="15"
                  color="#000"
                  class="icon"></uni-icons>
              </view>
              <view class="setting" @tap="goFeed">
                <image :src="imgUrl + 'mine/feedback.png'" mode="scaleToFill" />
                <view class="text"> 意见反馈 </view>
                <uni-icons
                  type="forward"
                  size="15"
                  color="#000"
                  class="icon"></uni-icons>
              </view>
              <view class="policy" @tap="logout">
                <image
                  v-if="phonenumber == 0"
                  :src="imgUrl + 'mine/policy.png'"
                  mode="scaleToFill" />
                <image
                  v-else
                  :src="imgUrl + 'mine/end.png'"
                  mode="scaleToFill" />
                <view class="text">
                  {{ phonenumber == 0 ? '隐私政策' : '退出登录' }}
                </view>
                <uni-icons
                  type="forward"
                  size="15"
                  color="#000"
                  class="icon"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <zdy-tabbar :current-page="4"></zdy-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: 0,
      phonenumber: 0,
	  nickName:'',
      avatar: '',
      imgUrl: this.$imgUrl,
      optionId: 0,
      badgesNum: 0,
      circleNum: 0,
      oneOrderNum: 0,
      formData: {
        avatar: '',
        mobile: '',
      },
    }
  },
  onLoad(option) {
    let _this = this
    _this.phonenumber = uni.getStorageSync('phonenumber')
    _this.avatar = uni.getStorageSync('avatar')
	_this.nickName=uni.getStorageSync('nickName') //2023-12-16
    _this.getList()
  },
  onShow(option) {
    let _this = this
    _this.optionId = uni.getStorageSync('optionId')
    _this.phonenumber = uni.getStorageSync('phonenumber')
    _this.avatar = uni.getStorageSync('avatar')
	_this.nickName=uni.getStorageSync('nickName') //2023-12-16
    _this.getList()
  },
  mounted() {},
  methods: {
    getList() {
      let _this = this
      wx.request({
        url: this.$httpApi.install.getBadgesNum,
        method: 'GET',
        data: {
          phone: _this.phonenumber,
        },
        success(res) {
          _this.badgesNum = res.data.data.badgesNum
          _this.circleNum = res.data.data.circleNum
          _this.oneOrderNum = res.data.data.oneOrderNum
        },
      })
    },
    getLogin() {
      uni.navigateTo({
        url: 'pages/login/index',
      })
    },
    btnSet() {
      let _this = this
      _this.phonenumber = uni.getStorageSync('phonenumber')
      if (_this.phonenumber == 0) {
        uni.navigateTo({
          url: '/pages/login/index',
        })
      } else {
        uni.navigateTo({
          url: '/myPackageA/pages/settings/index',
        })
      }
    },
    goPolicy() {
      let _this = this
      if (_this.phonenumber == 0) {
        uni.navigateTo({
          url: '/pages/login/index',
        })
      } else {
        uni.navigateTo({
          url: '/myPackageA/pages/policy/index',
        })
      }
    },
    goFeed() {
      if (this.phonenumber == 0) {
        uni.navigateTo({
          url: '/pages/login/index',
        })
      } else {
        uni.navigateTo({
          url: '/myPackageA/pages/feedBack/index',
        })
      }
    },
    goTrip() {
      if (this.phonenumber == 0) {
        uni.navigateTo({
          url: '/pages/login/index',
        })
      } else {
        uni.navigateTo({
          url: '/myPackageA/pages/trip/index',
        })
      }
    },
    ectBtn() {
      if (this.phonenumber == 0) {
        uni.navigateTo({
          url: '/pages/login/index',
        })
      } else {
        uni.navigateTo({
          url: '/myPackageA/pages/collection/index?circleNum='+this.circleNum+'&oneOrderNum='+this.oneOrderNum,
        })
      }
    },
    circleBtn() {
      if (this.phonenumber == 0) {
        uni.navigateTo({
          url: '/pages/login/index',
        })
      } else {
        uni.navigateTo({
          url: '/myPackageA/pages/circle/index',
        })
      }
    },

    onChooseAvatar(res) {
      console.log(res)
      let _this = this
      let mobile = _this.phonenumber
      const avatar = res.detail.avatarUrl
      _this.formData.mobile = mobile
      _this.formData.avatar = avatar
      uni.uploadFile({
        url: _this.$httpApi.install.avaterInfo, // 接口地址
        name: 'avatar', // 接口参数名
        filePath: res.detail.avatarUrl, // 文件路径(接口参数值)
        formData: {
          avatar: res.detail.avatarUrl,
          mobile: uni.getStorageSync('phonenumber'),
        },
        // 请求成功
        success(res) {
          const obj = JSON.parse(res.data)
          // 更新用户头像
          _this.avatar = obj.url
          // 更新 Pinia 中存储的头像
          uni.setStorageSync('avatar', obj.url)
          // 提示用户
          uni.showToast({ icon: 'success', title: '头像更新成功~' })
          uni.navigateTo({
            url: '/pages/mine/mine',
          })
        },
      })
    },
    // 退出登录
    logout() {
      let _this = this
      console.log(_this.phonenumber)
      if (_this.phonenumber == 0) {
        uni.navigateTo({ url: '/pages/login/index' })
      } else {
        wx.showModal({
          title: '提示',
          content: '您确定要退出登录吗',
          success: function (res) {
            if (res.confirm) {
              //这里是点击了确定以后
              uni.setStorageSync('openid', '')
              uni.setStorageSync('mobile', '')
              uni.setStorageSync('nickName', '')
              uni.setStorageSync('phonenumber', '')
              uni.setStorageSync('userId', '')
              uni.setStorageSync('userName', '')
              uni.setStorageSync('loginTime', '')
              uni.setStorageSync('avatar', '')
			  uni.setStorageSync('optionId', '')
              _this.loginFlag = false
              uni.showToast({ title: '退出成功', icon: 'none' })

              // setTimeout(() => {
              //   uni.navigateTo({ url: '/pages/index/index' })
              // }, 500)
              uni.reLaunch({
                url: '/pages/mine/mine',
              })
            } else {
              //这里是点击了取消以后
              console.log('用户点击取消')
            }
          },
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
	.badge1{
		position:absolute;
		width:41rpx !important;
		height:37rpx !important;
	}
button {
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  border-radius: 0;
  background-color: transparent;
  line-height: normal;
  color: #a4a4a4;
  font-size: 20rpx;
}

button::after {
  border: none;
}
.myContent {
  position: relative;
  .title {
    position: absolute;
    left: 44%;
    top: 12%;
    font-size: 37rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #000000;
  }
  .myTopImg {
    width: 750rpx;
    height: 500rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .myMiddle {
    position: absolute;
    top: 250rpx;

    .middleCon {
      width: 750rpx;
      // height: 900rpx;
      height: 80vh;
    }
    image {
      width: 100%;
      height: 100%;
    }

    .profile {
      position: absolute;
      top: -90rpx;
      left: 270rpx;
      width: 200rpx;
      height: 200rpx;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0rpx 0rpx 15rpx 1rpx rgba(3, 69, 145, 0.14);
      opacity: 1;
      .avaterImg {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
      }

      .userName {
        width: 300rpx;
        font-size: 32rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #303030;
        margin-left: 15rpx;
      }

      .badge {
        position: absolute;
        top: 215rpx;
        left: 200rpx;
        width: 41rpx;
        height: 37rpx;
      }
    }
    .myMiddleActivity {
      position: absolute;
      margin: 0 30rpx;
      top: 220rpx;
      .activity {
        display: flex;
		
        .collection {
			    display: flex;
			    align-items: center;
			    justify-content: center;
				flex-direction: column;
          width: 216rpx;
          height: 200rpx;
          background: linear-gradient(1deg, #ffffff 0%, #b1ffd5 100%);
          border-radius: 20rpx;
          opacity: 1;
          border: 1rpx solid rgba(0, 0, 0, 0);
          image {
            position: absolute;
            top: -50rpx;
		   width: 217rpx;
		   height: 162rpx;
          }
          .num {
            font-size: 36rpx;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: bold;
            color: #303030;
			margin-top: 50rpx ;
          }
          .title1 {
            font-size: 28rpx;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            color: #595959;
		margin-top: 20rpx ;
          }
        }
        .itinerary {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
    width: 216rpx;
    height: 200rpx;
          margin-left: 21rpx;
          background: linear-gradient(359deg, #ffffff 0%, #fce0fa 100%);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          opacity: 1;
          border: 1rpx solid rgba(0, 0, 0, 0);
          image {
            position: absolute;
            top: -50rpx;
            width: 217rpx;
            height: 162rpx;
          }
       .num {
           font-size: 36rpx;
           font-family: Source Han Sans CN, Source Han Sans CN;
           font-weight: bold;
           color: #303030;
       	margin-top: 50rpx ;
         }
         .title1 {
           font-size: 28rpx;
           font-family: Source Han Sans CN, Source Han Sans CN;
           font-weight: 400;
           color: #595959;
       margin-top: 20rpx ;
         }
 
        }
        .circle {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
     width: 216rpx;
     height: 200rpx;
          background: linear-gradient(1deg, #ffffff 0%, #fbf1d9 100%);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          opacity: 1;
          border: 1rpx solid rgba(0, 0, 0, 0);
          margin-left: 21rpx;
          image {
            position: absolute;
            top: -50rpx;
       width: 217rpx;
       height: 162rpx;
    
          }
    .num {
        font-size: 36rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        color: #303030;
    	margin-top: 50rpx ;
      }
      .title1 {
        font-size: 28rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #595959;
    margin-top: 20rpx ;
      }

        }
      }
    }

    .setTitle {
      margin-top: 30rpx;
      font-size: 32rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      color: #303030;
    }
    .services {
      position: absolute;
      margin-top: 30rpx;
      width: 690rpx;
      // height: 360rpx;
      overflow: auto;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      opacity: 1;
      padding: 43rpx 40rpx 47rpx 40rpx;
    }

    .settingLogin {
      display: flex;
      padding-top: 10rpx;
      border-left: 10rpx;
      &:not(:last-child) {
        position: relative;

        &::after {
          content: '';
          width: 630rpx;
          height: 2rpx;
          background-color: rgba(145, 164, 178, 0.2);
          position: absolute;
          bottom: -25rpx;
        }
      }
      image {
        width: 30rpx;
        height: 30rpx;
        margin-top: 7rpx;
      }
      .text {
        margin-left: 13rpx;
        font-size: 30rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #595959;
      }
      .icon {
        margin-top: -1rpx;
        margin-left: 470rpx;
      }
    }
    .line {
      margin-top: 38rpx;
      width: 600rpx;
      height: 1rpx;
      opacity: 0.2;
      border: 1rpx solid #91a4b2;
    }
    .setting {
      margin-top: 60rpx;
      display: flex;
      image {
        width: 30rpx;
        height: 30rpx;
        margin-top: 7rpx;
      }
      &:not(:last-child) {
        position: relative;

        &::after {
          content: '';
          width: 630rpx;
          height: 2rpx;
          background-color: rgba(145, 164, 178, 0.2);
          position: absolute;
          bottom: -25rpx;
        }
      }
      .text {
        width: 200rpx;
        margin-left: 13rpx;
        font-size: 30rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #595959;
      }
      .icon {
        margin-top: -1rpx;
        margin-left: 330rpx;
      }
    }
    .policy {
      margin-top: 60rpx;
      display: flex;
      image {
        width: 30rpx;
        height: 30rpx;
        margin-top: 7rpx;
      }
      &:not(:last-child) {
        position: relative;

        &::after {
          content: '';
          width: 630rpx;
          height: 2rpx;
          background-color: rgba(145, 164, 178, 0.2);
          position: absolute;
          bottom: -25rpx;
        }
      }
      .text {
        margin-left: 13rpx;
        font-size: 30rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #595959;
      }
      .icon {
        position: absolute;
        margin-top: -1rpx;
        margin-left: 570rpx;
      }
    }
  }
}
</style>
